<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/common/global.jsp" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>个人记帐</title>
    <link rel="stylesheet" type="text/css" href="${staticPath}/resources/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="${staticPath}/resources/css/core.css"/>
    <%@include file="/common/com.jsp"%>
    <script type="text/javascript" src="${staticPath}/resources/js/valid/user_validate.js"></script>
    <script type="text/javascript">
        var basePath = "${staticPath }";
    </script>
    <!-- 触发JS刷新-->
    <script type="text/javascript">
        function changeImg(){
            var img = document.getElementById("img");
            img.src = "${basePath}/front/authimage?date=" + new Date();;
        }
    </script>
</head>

<body>

<!-- 中部 start-->
<div class="wrap">
    <!-- 头部导航区 -->
    <div class="nav" style="position:absolute;top:-100px;">
        <div class="nav_left">
           <%-- <img src="${staticPath}/resources/image/logo_core.png"/>--%>
        </div>
        <div class="nav_right">
            <ul>
                <li><a href="${staticPath}/front/tologin">登录</a></li>
            </ul>
        </div>
    </div><!-- 头部导航区结-->

    <!-- 内容区 start -->
    <div class="content">
        <div style="width:400px;margin:0 auto;margin-top:100px;">
            <form action="${path}/front/regist" method="post" id="reg_form">
                <h1 style="font-size:40px;font-weight:bold;margin-left:60px;">注册</h1>
                <div style="margin-top:30px;">
                    用户名:&nbsp;&nbsp;<input id="username" type="text" name="username" placeholder="用户名"/>
                    <span id="ajax_username_msg"></span><span id="username_msg"></span>
                </div>
                <div style="margin-top:30px;">
                    密&nbsp;&nbsp;码:&nbsp;&nbsp;<input type="password" id="password" name="password" placeholder="密码"/>
                    <span id="password_msg"></span>
                </div>
                <div style="margin-top:30px;">
                    重复密码:<input type="password" id="rpassword" placeholder="再输入一次"/>
                    <span id="rpassword_msg"></span>
                </div>
                <div style="margin-top:30px;">
                    输入邮箱:<input type="text" id="email" name="email" placeholder="输入邮箱"/>
                    <span id="email_msg"></span>
                </div>
                <div style="margin-top:30px;">
                    验证码:&nbsp;&nbsp;<input maxlength="4" type="text" id="validcode" name="validcode" placeholder="验证码" style="width: 50px;"/>
                    <img id="img" src="${basePath}/front/authimage" style="vertical-align: middle;"/>
                    <a href='#' onclick="javascript:changeImg()"><label>看不清</label></a>
                </div>
                <div style="height: 20px;"><span id="valid_msg">${msg}</span></div>
                <div style="margin-top:30px;margin-left:180px;">
                    <input type="submit"  value="注册"/>
                </div>
            </form>
        </div>
    </div>  <!-- 内容区 end -->
    <!--copyright开始-->
    <div class="copyright clearfix" id="copyright">
        <div class="copyright_content">
            <ul>
                <li>关于
                    <ul>
                        <li>品牌故事</li>
                        <li>联系我们</li>
                        <li>加入我们</li>
                        <li>版权声明</li>
                    </ul>
                </li>
                <li>课程
                    <ul>
                        <li>PHP开发</li>
                        <li>前端开发</li>
                        <li>JAVA开发</li>
                        <li>Android开发</li>
                    </ul>
                </li>
                <li>关注
                    <ul>
                        <li>新浪微博</li>
                        <li>腾讯微博</li>
                        <li>企业微信</li>
                        <li>QQ空间</li>
                    </ul>
                </li>
                <li>留言
                    <ul>
                        <li>意见反馈</li>
                        <li>问题留言</li>
                        <li>媒体联络</li>
                        <li>在线客服</li>
                    </ul>
                </li>
                <li><img src="${staticPath}/resources/image/weixin.png" alt="微信关注" width="30" height="27" />微信关注
                    <ul>
                        <li><img src="${staticPath}/resources/image/qrcode.jpg" alt="扫描关官方微信" width="102" height="102" /></li>
                    </ul>
                </li>
            </ul>
        </div>
        <!--copyright_content结束-->
    </div>  <!--copyright结束-->
</div><!-- 中部 end -->

<!--  用户名异步较验   -->
<script type="text/javascript">


    $(document).ready(function () {

        var global_flag1 = false;
        var global_flag2 = false;
        var global_flag3 = false;
        var global_flag4 = false;
        var global_flag5 = false;


        $("#username").blur(function () {
            var username = $("#username").val();
            var flag = validateUsername(username);
            $.ajax({
                type:"GET",
                url:basePath + "/front/validusername",
                data:"username="  + $("#username").val(),
                dataType:"html",
                success:function (msg) {
                    $("#ajax_username_msg").html(msg);
                },
                beforeSend:function (xhr) {
                    if (!flag){
                        xhr.abort();
                        global_flag1=false;
                    }else{
                        global_flag1=true;
                    }
                }
            });
        });
        $("#password").blur(function () {
            var password = $("#password").val();
            global_flag2= validatepassword(password);
        });
        $("#rpassword").blur(function () {
            var rpassword = $("#rpassword").val();
            var password = $("#password").val();
            global_flag3=validateRpassword(rpassword,password);
        });
        $("#email").blur(function(){
            var email = $("#email").val();
            global_flag4= validateEmail(email);

        });
        $("#validcode").blur(function () {
            var validcode = $("#validcode").val();
            global_flag5= validate_code(validcode);
        });

        $("#reg_form").submit(function (e) {

            if(global_flag1&&global_flag2&&global_flag3&&global_flag4&&global_flag5){
            }else{
                e.preventDefault();
            }
        });


    });
</script>



</body>
</html>
